<template>
  <div class="login">
      <img src="~@/assets/登录2.jpg" width="100%" height="100%" alt="">
    <el-card class="form-box">
    <h2>注  册</h2>
  
  <div class="g">
  <el-form :model="form" ref="formRef" :rules="rules" >
    <el-form-item label="" prop="username">
      <p>用户名</p>
      <el-input type="text" v-model="form.username" placeholder="请输入用户名" class="i"></el-input>
    </el-form-item>

    <el-form-item label="" prop="password">
      <p>密码</p>
      <el-input type="password" v-model="form.password" placeholder="请输入密码" class="i"></el-input>
    </el-form-item>
    <el-form-item label="" prop="confirmPassword">
      <p>确认密码</p>
          <el-input type="password" v-model="form.confirmPassword" placeholder="请确认密码" class="i"></el-input>
        </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.remember">记住我</el-checkbox>

    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="resetForm" class="w">注册</el-button>
    </el-form-item>
    <router-view></router-view>
    
  </el-form>
  </div>
</el-card>
  </div> 
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios';
import router from '@/router'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';


export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
      remember: false,
      confirmPassword: '',
    })
     //编写验证规则
    const rules = {
      username: [
       { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [  
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
        { validator: (rule, value, callback) => {
          if (value !== form.password) {
            callback(new Error('两次密码输入不一致'))
          } else {
            callback()
          }
        }, trigger: 'blur' }
      ]
    }

    const formRef = ref(null)
    const router = useRouter();
    const resetForm = () => {
      if(form.confirmPassword !== form.password) {
            ElMessage.error('两次密码输入不一致');
        }else if(form.username!=='' && form.password!=='' && form.confirmPassword!==''){
        let arr=[{
            username:form.username,
            password:form.password,
            confirmPassword:form.confirmPassword
        }];
        console.log('arr--->',arr);
        //存储对象到本地
         //把填写的信息赋值给数组，再把数组保存到localStorage中
        localStorage.setItem('userArr',JSON.stringify(arr));
        ElMessage.success('注册成功');
        router.push('/zuye');
       }else{
        ElMessage.error('请填写注册信息');
      }
    //获取localStorage保存信息
    onMounted(() => {
      form.userArr = JSON.parse(localStorage.getItem('userArr'));
      console.log('111',form.userArr);
      if(form.userArr==null || form.userArr==''){
        console.log('222');
      }else if(localStorage['username']===form.userArr)   {
        ElMessage.error('用户已存在');
      }else{
        ElMessage.success('登录成功');
        router.push('/zuye');
      }
    })
    
      
    }

      
    /*const resetForm = () => {
     // formRef.value.validate((valid) => {
      console.log(111);
      //访问后台json数据进行验证
      axios.get('/public/pwd.json')
         .then(res => {
              console.log(res.data);
              //条件语句进行判断
              if (
                  res.data.username == form.username &&
                  res.data.password == form.password
                  //res.data.username == username.value &&
                  //res.data.password == password.value
              ) {
                ElMessage.error('用户已存在');
                  
              } else {
                ElMessage.success('注册成功');
                router.push('/zuye');
              }
            })
         .catch(err => {
              console.log(err);
          });*/
          
  


    return {
      form,
      rules,
      formRef,
      resetForm
    }
  }
}


</script>

<style scoped>
.form-box{
  padding:40px;
  width: 300px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  /*设置背景透明度*/
  opacity: 0.8;
  
  text-align: center;
  border-radius: 10px;
}
.w{
  width: 300px;
  height: 30px;
  background-color: #27b3e7;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
p{
  font-size: 10px;
  height: 15px;
}
h2{
  font-size: 20px;
}
.i{
  width: 300px;
  height: 25px;
  background-color: #ccd5d9;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
